<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport"/>

    <title>loginProviders Fragment</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag"/>
</head>

<body>
<main class="container mt-3 mb-3" role="main">
    <div class="login-providers" th:fragment="loginProviders" th:remove="tag">
        <div th:if="${delegatedAuthenticationProviderConfigurations}">

            <h3 class="text-center mt-md-0 mt-4">
                <i class="fas fa-user-shield"></i>
                <span th:utext="#{screen.welcome.label.loginwith}">External Identity Providers</span>
            </h3>

            <div class="card-title" th:if="${delegatedAuthenticationProviderPrimary != null}">
                <div class="banner banner-success" role="alert">
                    <span th:utext="#{screen.welcome.label.navto}"/>
                </div>
            </div>

            <div class="d-flex justify-content-center"
                 th:style="'display:' + ${delegatedAuthenticationProviderPrimary != null ? 'none' : 'block'}">
                <ul class="list-unstyled d-flex flex-column m-0 flex-fill">
                    <li class="p-1 login-provider-item"
                        th:each="entry: ${delegatedAuthenticationProviderConfigurations}"
                        th:switch="${entry.type}">
                        <a class="mdc-button mdc-button--raised w-100"
                           th:attr="autoredirect=${entry.autoRedirect}"
                           th:classappend="'mdc-button-' + ${entry.type}" th:href="@{${entry.redirectUrl}}"
                           th:inline="text" th:title="${entry.name + ' ' + entry.type}">

                            <span th:case="twitter"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-twitter')}"></span>
                            <span th:case="windowslive"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-windows')}"></span>
                            <span th:case="yahoo"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-yahoo')}"></span>
                            <span th:case="bitbucket"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-bitbucket')}"></span>
                            <span th:case="wordpress"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-wordpress')}"></span>
                            <span th:case="google2"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-google-plus')}"></span>
                            <span th:case="github"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-github-circle')}"></span>
                            <span th:case="dropbox"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-dropbox')}"></span>
                            <span th:case="linkedin2"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-linkedin')}"></span>
                            <span th:case="facebook"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-facebook')}"></span>
                            <span th:case="oidc"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-openid')}"></span>
                            <span th:case="saml2"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-account-key')}"></span>
                            <span th:case="cas"
                                  th:class="${#strings.defaultString(entry.cssClass,'mdi mdi-login')}"></span>
                            <span class="mdi mdi-account-key" th:case="*"></span>

                            [[${entry.name}]]
                        </a>
                    </li>
                    <li th:if="${identityProviderDiscoveryEnabled}">
                        <script th:inline="javascript" type="text/javascript">
                            /*<![CDATA[*/
                            var url = /*[[@{/idp/discovery}]]*/;

                            var returnUrl = /*[[${cas.server.name} + @{/idp/discovery/redirect}]]*/;

                            if (window.location.search) {
                                returnUrl += encodeURIComponent(window.location.search);
                            }
                            url += "?return=" + returnUrl;
                            var link = `<a href='${url}' class='mdc-button mdc-button--raised d-block'>
                                                                    <i class='mdi mdi-shield' aria-hidden='true'></i>
                                                                    <span class="mdc-button__label">SAML2 Identity Provider Discovery</span></a>`;
                            document.write(link);
                            /*]]>*/
                        </script>
                    </li>
                </ul>
            </div>
        </div>

        <div id="list-providers"
             th:class="${delegatedAuthenticationProviderPrimary == null ? 'card d-sm-none d-md-block bg-light' : ''}"
             th:if="${wsfedUrls}">

            <div class="card-body">
                <h3 class="card-title" th:if="${delegatedAuthenticationProviderPrimary == null}"
                    th:utext="#{screen.welcome.label.loginwith}">Login with:</h3>
                <div class="card-title" th:if="${delegatedAuthenticationProviderPrimary != null}">
                    <div class="alert alert-info">
                        <span th:utext="#{screen.welcome.label.navto}"/>
                    </div>
                </div>

                <div class="card-text"
                     th:style="'display:' + ${delegatedAuthenticationProviderPrimary != null ? 'none' : 'block'}">
                    <ul>
                        <li th:each="entry: ${wsfedUrls}">
                            <a class="mdc-button mdc-button--raised d-block"
                               onload="" th:attr="autoredirect=${entry.autoRedirect}" th:href="@{${entry.redirectUrl}}"
                               th:inline="text" th:title="${entry.name}">

                                <i class="mdi mdi-windows"></i>

                                <span class="mdc-button__label">[[${entry.name}]]</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <script>
            var redirectTo = $("a[autoRedirect=true]").attr("href");
            if (redirectTo != null && redirectTo != undefined) {
                window.location.href = redirectTo;
            }
        </script>
    </div>
</main>
</body>

</html>
